<template>
	<view>
		<view>
			<view class="d-flex a-center j-sb py-2 px-3 text-light-muted">
				<view class="iconfont icon-shanchu1" @click="goBack"></view>
				<view class="font-md">忘记密码</view>
			</view>
			<view class="p-5">
				<view class="font-big mb-5">密码登录</view>
				<input type="text" class="border-bottom mb-4 uni-input px-0 py-1" placeholder="请输入手机号/邮箱/账号"
					placeholder-class="text-light-muted" v-model="username" @focus="focus('username')"
					@blur="blur('username')" :class="focusclass.username?'input-border-color':''" />

				<view class="uni-input-wrapper">
					<input type="text" :password="showPassword" class="uni-input border-bottom mb-4 uni-input px-0 py-1"
						placeholder="请输入密码" placeholder-class="text-light-muted" v-model="password"
						@focus="focus('password')" @blur="blur('password')"
						:class="focusclass.password?'input-border-color':''" />
					<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
						@click="changePassword">&#xe568;</text>
				</view>

				<button class="py-1 w-100 d-flex a-center j-center main-bg-color  rounded font-md mb-4"
					hover-class="main-bg-hover-color" @click="submit">
					登录
				</button>
				<label class="checkbox d-flex a-center">
					<checkbox :checked="check" @click="check=!check" />
					<text class="text-light-muted font">已阅读并同意XXXXX协议</text>
				</label>
				
				<view class="my-5">
					<divider></divider>
				</view>
				<button class="avatar-wrapper" style="width: 120rpx;height: 120rpx;margin: 0 auto;padding: 0;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				  <image class="avatar" :src="avatar" style="width: 120rpx;height: 120rpx;"></image>
				</button> 
				<input type="nickname" class="weui-input" placeholder="请输入昵称" @input="getNickName"/>
				<button class="py-1 w-100 d-flex a-center j-center text-white main-bg-hover-color  rounded font-md mb-4"
					hover-class="main-bg-hover-color" @click="submit2">
					登录
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getLogin } from '../../api/index.js'
	import {mapState,mapMutations,mapActions} from 'vuex'
	export default {
		data() {
			return {
				avatar: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				nickname:'',
				code:'',
				showPassword: true,
				username: 'user2',
				password: 'zcmcss',
				check: false,
				focusclass: {
					username: false,
					password: false
				},
				rules: {
					username: [{
						message: '请输入正确的账号，账号长度为2-10之间',
						rule: /^[a-zA-Z0-9_-]{2,10}$/
					}, ],
					password: [{
						message: '请输入正确的密码，密码长度为4-20之间',
						rule: /^[a-zA-Z]([-_a-zA-Z0-9]{4,20})$/
					}],
				}
			}
		},
		mounted() {
			// this.validate('username')
		},
		computed:{
			// ...mapState({
			// 	count:state=>state.user.count
			// })
		},
		methods: {
			onChooseAvatar(e) {//头像
			    const { avatarUrl } = e.detail 
			    this.avatar=avatarUrl
			},
			getNickName(e){//呢称
				console.log('eeeeeeee=>',e);
				this.nickname=e.detail.value
			},
			goBack(){
				uni.switchTab({
					url:'/pages/myfile/myfile'
				})
			},
			...mapMutations(['setUserInfo']),
			...mapActions(['getcartlist']),
			focus(key) {
				this.focusclass[key] = true
			},
			blur(key) {
				this.focusclass[key] = false
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			validate(key) {
				let check = true
				this.rules[key].forEach(v => {
					if(!v.rule.test(this[key])){
						uni.showToast({
							title: v.message,
							icon: 'none'
						})
						check = false
					}
				})
				return check;
			},
			submit() {
				if (!this.validate('username')) {
					return
				};
				if (!this.validate('password')) {
					return
				};
				if (this.check) {
					getLogin(this.username, this.password).then(res => {
						console.log('res', res);
						console.log('this',this);
						if(res.msg=='ok'){
							this.getcartlist()
							// uni.$emit('update')    //在cart.vue中使用了onReady()替代了mounted()
							this.setUserInfo(res.data)
							uni.switchTab({
								url:'/pages/myfile/myfile'
							})
						}
					})
				} else {
					uni.showToast({
						title: '请同意相关app协议和内容',
						icon: 'none'
					})
				}
			},
			submit2(){//微信第三方登录
				uni.login({
					success:(res)=> {
						console.log('reslogin=>',res);
						this.code=res.code
						// 默认方式  //小程序、app不存在跨域问题，node.js中的cors可以解决跨域问题
						uni.request({
						  url: "http://localhost:3000/api/users/login",
						  success: (res) => {
						    console.log(res.data);
							// console.log(res);
							// var res2=res.data
							// if(res2.msg=='ok'){
							// 	this.submit()
							// }
						  },
						  method:'POST',
						  data:{code:this.code,nickname:this.nickname,avatar:this.avatar},
						  fail: (err) => {
						    console.error(err);
						  },
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.uni-input-wrapper {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #FFFFFF;
	}

	.uni-input {
		height: 28px;
		line-height: 28px;
		font-size: 15px;
		padding: 0px;
		flex: 1;
		background-color: #FFFFFF;
	}

	.uni-icon {
		font-family: uniicons;
		font-size: 24px;
		font-weight: normal;
		font-style: normal;
		width: 24px;
		height: 24px;
		line-height: 24px;
		color: #999999;
	}

	.uni-eye-active {
		color: #f60;
	}
</style>